import React, { useEffect, useRef, useState } from 'react';
import useRPC from './useRPC1_2';
import styles from './index.module.less';

export default function Demo() {
  const [visible, setVisible] = useState(false);
  const { setDataEndpoint } = useRPC(
    () => {},
    () => {},
    visible,
    () => {},
  );
  return (
    <div className={styles.root}>
      rpctest
      <button
        type="button"
        onClick={() => {
          setDataEndpoint({ uri: `ws://192.168.1.159:10001/data/30c382d0-9bb3-4fa7-9434-f21cd0194b16` });
        }}
      >
        setDataEndpoint:dc test url1
      </button>
      <button
        type="button"
        onClick={() => {
          setDataEndpoint({ uri: `ws://192.168.1.159:10001/data/d67c0da3-41d7-4cec-a5db-f35b98768e53` });
        }}
      >
        setDataEndpoint:dc test url2
      </button>
      {[1, 2, 3].map((i) => {
        return (
          <button
            key={i}
            type="button"
            onClick={() => {
              setDataEndpoint({ uri: `ws://localhost:8${i}/test${i}` });
            }}
          >
            setDataEndpoint:ws://localhost:8{i}/test{i}
          </button>
        );
      })}
      <button
        type="button"
        onClick={() => {
          setVisible(!visible);
        }}
      >
        setVisible:{visible.toString()}
      </button>
    </div>
  );
}
